<template>
  <!-- 安东呼叫记录表单弹窗 -->
  <div>
    <el-dialog
      :close-on-click-modal="false"
      v-model="visibleDialog"
      :title="props.title"
      width="70%"
      draggable
      @close="closeDialog"
    >
      <el-form
        ref="formRef"
        :model="formData"
        :inline="true"
        :rules="rules"
        label-width="150"
      >
        <h4 class="mb-[20px] mt-[0px]">基本数据</h4>
        <div class="search-container">
          <el-row>
            <el-col :span="6">
              <el-form-item label="呼叫编号" prop="callCode">
                <span>{{ formData.callCode }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="工作中心编号" prop="workCenterCode">
                <span>{{
                  formData.workCenterCode + "-" + formData.workCenterName
                }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="是否停机" prop="isStop">
                <span v-if="formData.isStop === 1">是</span>
                <span v-else>否</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="呼叫类型" prop="callTypeName">
                <span>{{ formData.callTypeName }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="呼叫时间" prop="callTime">
                <span>{{ formData.callTime }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="响应时间" prop="answerTime">
                <span>{{ formData.answerTime }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="到场时间" prop="arriveTime">
                <span>{{ formData.arriveTime }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="维修完成时间" prop="repairFinishTime">
                <span>{{ formData.repairFinishTime }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="解决时间" prop="issueTime">
                <span>{{ formData.issueTime }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="呼叫状态" prop="callState">
                <span>
                  {{ useDictionary("CallState", formData.callState) }}</span
                >
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="处理人" prop="processorName">
                <span>{{ formData.processorName }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="工序" prop="processName">
                <span>{{ formData.processName }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="设备" prop="equipmentName">
                <span>{{ formData.equipmentName }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6" v-if="formData.stopName">
              <el-form-item label="停机类型" prop="stopName">
                <span>{{ formData.stopName }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6" v-if="formData.stopReasonName">
              <el-form-item label="停机原因" prop="stopReasonName">
                <span>{{ formData.stopReasonName }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="是否触发报检" prop="autoInspection">
                <span v-if="formData.autoInspection === 1">是</span>
                <span v-else>否</span>
              </el-form-item>
            </el-col>
            <el-col :span="6" v-if="formData.inspectionTypeName">
              <el-form-item label="报检类型" prop="inspectionTypeName">
                <span>{{ formData.inspectionTypeName }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="当前升级编号" prop="callSequence">
                <span>{{ formData.callSequence }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="到达当前升级编号" prop="arriveCallSequence">
                <span>{{ formData.arriveCallSequence }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="维修当前升级编号" prop="repairCallSequence">
                <span>{{ formData.repairCallSequence }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="创建时间" prop="createTime">
                <span>{{ formData.createTime }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="创建人" prop="createdUserName">
                <span>{{ formData.createdUserName }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="更新时间" prop="lastUpdateTime">
                <span>{{ formData.lastUpdateTime }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="更新人" prop="lastUpdatedUserName">
                <span>{{ formData.lastUpdatedUserName }}</span>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <h4 class="mb-[20px] mt-[20px]">详细数据</h4>
        <el-card shadow="never" class="table-container">
          <template #header>
            <el-button type="success" plain @click="handleAdd">
              <i-ep-plus />
              新增
            </el-button>
          </template>
          <div class="formTable">
            <el-table
              :data="formData.detail"
              :key="Math.random"
              border
              style="max-height: 250px; overflow: auto"
            >
              <el-table-column label="维修项目" props="repairMemo">
                <template #default="{ $index, row }">
                  <el-form-item
                    :prop="'detail.' + $index + '.repairMemo'"
                    :rules="rules.sonrepairMemo"
                    label-width="0"
                  >
                    <el-input
                      v-model="row.repairMemo"
                      placeholder="请输入维修项目"
                      clearable
                    />
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column label="维修开始时间" props="sonstartTime">
                <template #default="{ $index, row }">
                  <el-form-item
                    :prop="'detail.' + $index + '.startTime'"
                    :rules="rules.sonstartTime"
                    label-width="0"
                  >
                    <el-date-picker
                      v-model="row.startTime"
                      type="datetime"
                      value-format="YYYY-MM-DD HH:mm:ss"
                      placeholder="请选择维修开始时间"
                    >
                    </el-date-picker>
                  </el-form-item>
                </template>
              </el-table-column>

              <el-table-column label="维修结束时间" props="sonendTime">
                <template #default="{ $index, row }">
                  <el-form-item
                    :prop="'detail.' + $index + '.endTime'"
                    :rules="rules.sonendTime"
                    label-width="0"
                  >
                    <el-date-picker
                      v-model="row.endTime"
                      type="datetime"
                      value-format="YYYY-MM-DD HH:mm:ss"
                      placeholder="请选择维修结束时间"
                    >
                    </el-date-picker>
                  </el-form-item>
                </template>
              </el-table-column>

              <el-table-column label="说明" props="remarks">
                <template #default="{ $index, row }">
                  <el-form-item
                    :prop="'detail.' + $index + '.remarks'"
                    :rules="rules.sonremarks"
                    label-width="0"
                  >
                    <el-input
                      v-model="row.remarks"
                      placeholder="请输入备注"
                      clearable
                    />
                  </el-form-item>
                </template>
              </el-table-column>

              <el-table-column
                fixed="right"
                align="center"
                label="操作"
                width="300"
              >
                <template #default="scope">
                  <el-button
                    :disabled="formData.detail.length < 2"
                    type="danger"
                    link
                    @click.stop="handleDelete(scope.$index)"
                  >
                    <i-ep-delete />
                    删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-card>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" :loading="loading" @click="handleSubmit"
            >确 定
          </el-button>
          <el-button @click="closeDialog">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import request from "@/utils/request";
import { useTable, useDictionary } from "@/utils/useTable";
import { useDictStoreHook } from "@/store/modules/dictionary"; // 引入
const dictionaryStore = useDictStoreHook();

defineOptions({
  name: "ANDONANDCALLADDORUPDATE",
  inheritAttrs: false,
});

const emit = defineEmits(["reset-table", "change-visible"]);

const props = defineProps({
  visible: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
  title: {
    type: String,
    default: () => {
      return "";
    },
  },
  data: {
    type: Object,
    default: () => {
      return {};
    },
  },
  isReadonly: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
});

/** 弹窗显示 **/
const visibleDialog = ref(false);
watch(
  () => props.visible,
  (newVal: boolean) => {
    visibleDialog.value = newVal;
  }
);

/** formData定义表单数据 */
const formRef = ref(ElForm);
let formData = reactive({
  id: "",
  callCode: "",
  organizationId: "",
  organizationCode: "",
  plantId: "",
  plantCode: "",
  callTypeId: "",
  callTypeCode: "",
  crewId: "",
  crewCode: "",
  callSettingId: "",
  callSettingCode: "",
  workCenterId: "",
  workCenterCode: "",
  equipmentId: "",
  equipmentCode: "",
  isStop: "",
  stopId: "",
  stopCode: "",
  stopReasonId: "",
  stopReasonCode: "",
  callTime: "",
  answerTime: "",
  arriveTime: "",
  issueTime: "",
  callState: "",
  totalTime: "",
  processorId: "",
  processorName: "",
  autoInspection: "",
  inspectionTypeId: "",
  inspectionTypeCode: "",
  version: "",
  remarks: "",
  createTime: "",
  createdUserId: "",
  createdUserName: "",
  lastUpdateTime: "",
  lastUpdatedUserId: "",
  lastUpdatedUserName: "",
  enabled: "",
  deleted: "",
  processId: "",
  processCode: "",
  repairFinishTime: "",
  workCenterName: "",
  processName: "",
  callTypeName: "",
  stopReasonName: "",
  inspectionTypeName: "",
  stopName: "",
  equipmentName: "",
  callSequence: "",
  arriveCallSequence: "",
  repairCallSequence: "",
  callMethod: "",
  detail: [
    {
      id: "",
      repairFormCode: "",
      callId: "",
      callCode: "",
      version: "",
      remarks: "",
      createTime: "",
      createdUserId: "",
      createdUserName: "",
      lastUpdateTime: "",
      lastUpdatedUserId: "",
      lastUpdatedUserName: "",
      deleted: "",
      repairMemo: "",
      startTime: "",
      endTime: "",
      times: [],
    },
  ],
});

/** rules规则 */
const rules = reactive({
  sonrepairFormCode: [
    { required: true, message: "请输入维修单编号", trigger: "blur" },
  ],
  soncallId: [
    { required: true, message: "请输入安东呼叫订单id", trigger: "blur" },
  ],
  soncallCode: [
    { required: true, message: "请输入安东呼叫编号", trigger: "blur" },
  ],
  sonversion: [
    { required: true, message: "请输入数据版本号", trigger: "blur" },
  ],
  sonremarks: [{ required: true, message: "请输入说明", trigger: "blur" }],
  soncreateTime: [
    { required: true, message: "请输入创建时间", trigger: "blur" },
  ],
  soncreatedUserId: [
    { required: true, message: "请输入创建人", trigger: "blur" },
  ],
  soncreatedUserName: [
    { required: true, message: "请输入创建人名", trigger: "blur" },
  ],
  sonlastUpdateTime: [
    { required: true, message: "请输入更新时间", trigger: "blur" },
  ],
  sonlastUpdatedUserId: [
    { required: true, message: "请输入更新人", trigger: "blur" },
  ],
  sonlastUpdatedUserName: [
    { required: true, message: "请输入更新人名", trigger: "blur" },
  ],
  sondeleted: [{ required: true, message: "请输入删除标识", trigger: "blur" }],
  sonrepairMemo: [
    { required: true, message: "请输入维修项目", trigger: "blur" },
  ],
  sonstartTime: [
    { required: true, message: "请输入开始时间", trigger: "blur" },
  ],
  sonendTime: [
    { required: true, message: "请选择维修开始时间", trigger: "blur" },
  ],
  sontimes: [
    { required: true, message: "请选择维修结束时间", trigger: "blur" },
  ],
});

/** 删除行 */
const handleDelete = (index: any) => {
  formData.detail.splice(index, 1);
};

const detail = {
  id: "",
  repairFormCode: "",
  callId: "",
  callCode: "",
  version: "",
  remarks: "",
  createTime: "",
  createdUserId: "",
  createdUserName: "",
  lastUpdateTime: "",
  lastUpdatedUserId: "",
  lastUpdatedUserName: "",
  deleted: "",
  repairMemo: "",
  startTime: "",
  endTime: "",
};

/** 添加行 */
const handleAdd = () => {
  let sondata = JSON.parse(JSON.stringify(detail));
  formData.detail.push(sondata);
};

/** 编辑时赋值 */
watch(
  () => props.data,
  (newVal: any) => {
    formData.id = "";
    if (newVal?.id) {
      Object.assign(formData, props.data);
      if (formData.id) {
        getdetails();
      }
    }
  }
);

/** 关闭表单弹窗 */
function closeDialog() {
  visibleDialog.value = false;
  emit("change-visible", false);
  resetForm();
}

/** 重置表单 */
function resetForm() {
  formRef.value.resetFields();
  formRef.value.clearValidate();
  formData.detail = [JSON.parse(JSON.stringify(detail))];
  formData.id = "";
  formData.callCode = "";
  formData.organizationId = "";
  formData.organizationCode = "";
  formData.plantId = "";
  formData.plantCode = "";
  formData.callTypeId = "";
  formData.callTypeCode = "";
  formData.crewId = "";
  formData.crewCode = "";
  formData.callSettingId = "";
  formData.callSettingCode = "";
  formData.workCenterId = "";
  formData.workCenterCode = "";
  formData.equipmentId = "";
  formData.equipmentCode = "";
  formData.isStop = "";
  formData.stopId = "";
  formData.stopCode = "";
  formData.stopReasonId = "";
  formData.stopReasonCode = "";
  formData.callTime = "";
  formData.answerTime = "";
  formData.arriveTime = "";
  formData.issueTime = "";
  formData.callState = "";
  formData.totalTime = "";
  formData.processorId = "";
  formData.processorName = "";
  formData.autoInspection = "";
  formData.inspectionTypeId = "";
  formData.inspectionTypeCode = "";
  formData.version = "";
  formData.remarks = "";
  formData.createTime = "";
  formData.createdUserId = "";
  formData.createdUserName = "";
  formData.lastUpdateTime = "";
  formData.lastUpdatedUserId = "";
  formData.lastUpdatedUserName = "";
  formData.enabled = "";
  formData.deleted = "";
  formData.processId = "";
  formData.processCode = "";
  formData.repairFinishTime = "";
  formData.workCenterName = "";
  formData.processName = "";
  formData.callTypeName = "";
  formData.stopReasonName = "";
  formData.inspectionTypeName = "";
  formData.stopName = "";
  formData.equipmentName = "";
  formData.callSequence = "";
  formData.arriveCallSequence = "";
  formData.repairCallSequence = "";
  formData.callMethod = "";
}

const loading = ref(false);

/** 安东呼叫记录保存提交 */
function handleSubmit() {
  formRef.value.validate(async (valid: any) => {
    if (valid) {
      loading.value = true;
      const text = formData.id ? "编辑" : "新增";
      await request({
        url: "/andon/andrepairform/save",
        method: "post",
        data: formData,
      }).finally(() => {
        loading.value = false;
      });
      ElMessage.success(text + `成功`);
      closeDialog();
      emit("reset-table", formData.id);
    }
  });
}

async function getdetails() {
  let sondetails = await request({
    url: "/andon/andrepairform/getDetails",
    method: "post",
    data: formData,
  }).finally(() => {
    loading.value = false;
  });
  formData.detail = sondetails.data;
}
</script>

<style lang="scss" scoped>
h4 {
  font-weight: 400;
  color: #000;
  padding-left: 10px;
  font-size: 14px;
  line-height: 14px;
}

.formTable {
  :deep(.el-form-item) {
    margin-right: 0 !important;
  }
}

:deep(.el-dialog .el-dialog__body) {
  overflow-y: auto;
  height: 65vh;
}

:deep(.search-container .el-input.el-input--default.el-input--suffix) {
  // 固定宽度
}

:deep(.search-container .el-form-item--default .el-form-item__label) {
  // 固定宽度
  justify-content: end;
}
</style>
